<script lang="ts" setup>
import { NCollapse, NCollapseItem } from 'naive-ui';

const basicComponents = [
  { type: 'start', label: '开始' },
  { type: 'end', label: '结束' },
  { type: 'task', label: '处理' }
];

const gatewayComponents = [
  { type: 'inclusive', label: '包容网关' },
  { type: 'exclusive', label: '排他网关' },
  { type: 'parallel', label: '并行网关' }
];

const handleDragStart = (event: DragEvent, nodeType: string) => {
  if (event.dataTransfer) {
    // event.dataTransfer.setData('application/vueflow-node-type', nodeType);
    const element = event.currentTarget as HTMLElement;
    const rect = element.getBoundingClientRect();

    // 计算鼠标在元素内部的相对位置（从中心点计算更自然）
    const offsetX = event.clientX - rect.left;
    const offsetY = event.clientY - rect.top;

    event.dataTransfer?.setData(
      'application/json',
      JSON.stringify({
        type: nodeType,
        offset: {
          x: offsetX,
          y: offsetY,
          width: rect.width,
          height: rect.height
        }
      })
    );
    event.dataTransfer.effectAllowed = 'move';
  }
};
</script>

<template>
  <NCollapse :default-expanded-names="['basic', 'gateways']">
    <NCollapseItem title="基础组件" name="basic">
      <div class="component-list">
        <div
          v-for="comp in basicComponents"
          :key="comp.type"
          class="component-item"
          draggable="true"
          @dragstart="e => handleDragStart(e, comp.type)"
        >
          <div class="component-content">
            <SvgIcon :local-icon="`flow-${comp.type}`" class="component-shape"></SvgIcon>
            <span>{{ comp.label }}</span>
          </div>
        </div>
      </div>
    </NCollapseItem>

    <NCollapseItem title="网关组件" name="gateways">
      <div class="component-list">
        <div
          v-for="comp in gatewayComponents"
          :key="comp.type"
          class="component-item"
          draggable="true"
          @dragstart="e => handleDragStart(e, comp.type)"
        >
          <div class="component-content">
            <SvgIcon :local-icon="`flow-${comp.type}`" class="component-shape"></SvgIcon>
            <span>{{ comp.label }}</span>
          </div>
        </div>
      </div>
    </NCollapseItem>
  </NCollapse>
</template>

<style scoped>
.component-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

.component-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.component-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  cursor: move;
  background: white;
  width: 100%;
}

.component-shape {
  width: 30px;
  height: 30px;
}

.start,
.end {
  border-radius: 50%;
  background: #ff7b7b;
}

.task {
  border-radius: 4px;
  background: #7bafff;
}

.inclusive,
.exclusive,
.parallel {
  transform: rotate(45deg);
  background: #7bff8f;
}
</style>
